<template>
	<view class="filter">
		<view class="top-bar">
			<t-icon name="chevron-left" size="26" @click="onBack" />
			<text class="top-bar-title">筛选</text>
			<t-button size="medium" theme="primary" variant="text" @click="onDeleteSelectAll">清空</t-button>
		</view>
		<view class="select-tag">
			<view class="select-tag-item" v-for="item in selectList" :key="`${item.label}-${item.value}`">
				<text>{{ item.label }}</text>
				<t-icon name="close" size="16" @click="onDeleteSelect(item)" />
			</view>
		</view>
		<view class="side-bar">
			<t-side-bar :value="sideBarIndex" @change="onSideBarChange">
				<t-side-bar-item v-for="(item, index) in categoryList" :key="index" :value="index" :label="item.label" />
			</t-side-bar>
			<view ref="sideBarContent" class="side-bar-content">
				<view v-for="(item, index) in categoryList" :key="index" class="side-bar-content-section">
					<view class="side-bar-content-section-title">{{ item.label }}</view>
					<view class="side-bar-content-section-child">
						<view
							class="side-bar-content-section-child-tag"
							:class="isSelect(child) ? 'active' : ''"
							v-for="(child, childIndex) in item.children"
							:key="childIndex"
							@click="onSelectItem(child, item)"
						>
							{{ child.label }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<t-fab :icon="iconFunc" text="搜索" class="main-btn" @click="onSearch" />
	</view>
</template>

<script setup>
	import { computed, reactive, ref, onMounted, h } from 'vue';
	import { SearchIcon } from 'tdesign-icons-vue-next';
	import { onLoad } from '@dcloudio/uni-app';
	
	onMounted(() => {
	  getOffsetTopList();
	  moveToActiveSideBar(Number(sideBarIndex.value));
	});
	
	const iconFunc = () => h(SearchIcon, { size: '20px' });
	const sideBarContent = ref();
	const offsetTopList = reactive([]);
	const sideBarIndex = ref(0);
	const selectList = ref([]);
	const isSelect = computed(() => child => selectList.value.some(item => item.value == child.value))
	const categoryList = ref([
		{
			label: '类别',
			field: 'jjcd',
			children: [
				{ label: '系统', value: '系统', field: 'jjcd' },
				{ label: '业务', value: '业务', field: 'jjcd' },
			]
		},
		{
			label: '状态',
			field: 'ztzt',
			// multipleSelect: true,
			children: [
				{ label: '发起', value: 2, field: 'ztzt' },
				{ label: '处理', value: 5, field: 'ztzt' },
				{ label: '驳回', value: 4, field: 'ztzt' },
				{ label: '分发', value: 6, field: 'ztzt' },
				{ label: '办结', value: 7, field: 'ztzt' },
			]
		},
	]);
	
	const onSearch = () => {
		console.log('onSearch');
	}
	
	const onSelectItem = (child, item) => {
		const isSelected = isSelect.value(child);
		if (item['multipleSelect']) {
			if (isSelected) selectList.value = selectList.value.filter(item => item.value != child.value);
			else selectList.value.push(child);
		} else {
			selectList.value = selectList.value.filter(item => item.field != child.field);
			if (!isSelected) selectList.value.push(child);
		}
	}
	
	const onDeleteSelect = item => {
		selectList.value = selectList.value.filter(it => it.value != item.value);
	}
	
	const onDeleteSelectAll = () => {
		selectList.value = [];
	}
	
	const onSideBarChange = value => {
	  sideBarIndex.value = value;
	  moveToActiveSideBar(Number(value));
	};
	
	const getOffsetTopList = () => {
	  if (sideBarContent.value) {
	    const titleDomList = sideBarContent.value.$el.querySelectorAll(`.side-bar-content-section-title`);
	    titleDomList.forEach(item => offsetTopList.push(item.offsetTop));
	  }
	};
	
	const moveToActiveSideBar = index => {
	  if (sideBarContent.value) sideBarContent.value.$el.scrollTop = offsetTopList[index] - offsetTopList[0];
	};
	
	const onBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>

.filter {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	
	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 8px 12px;
		padding-bottom: 0;
		padding-right: 0;
		
		&-title {
			font-size: 18px;
			font-weight: 500;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	
	.select-tag {
		// height: 1px;
		display: flex;
		overflow-x: auto;
		gap: 8px;
		padding: 8px;
		padding-top: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		// margin-bottom: 12px;
		
		&-item {
			font-size: 14px;
			min-width: fit-content;
			display: flex;
			align-items: center;
			column-gap: 4px;
			background: #f3f3f3;
			border-radius: 6px;
			padding: 6px 10px;
		}
	}
	
	.side-bar {
		display: flex;
		flex: 1;
		overflow: hidden;
		
		.t-side-bar { 
			padding-bottom: 54px; // 因为悬浮按钮流出来的空白区域
		}
		
		&-content {
			flex: 1;
			padding: 8px;
			padding-bottom: 66px; // 因为悬浮按钮流出来的空白区域
			display: flex;
			flex-direction: column;
			row-gap: 14px;
			overflow: auto;
			scroll-behavior: smooth;
			
			&-section {
				
				&-title {
					font-size: 18px;
					font-weight: 500;
					margin-bottom: 8px;
				}
				
				&-child {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 8px;
					
					&-tag {
						font-size: 14px;
						// background: #f6f7fb;
						background: #f3f3f3;
						border: 2px solid #f3f3f3;
						border-radius: 6px;
						text-align: center;
						padding: 8px 0;
						
						&.active {
							background: #edf0ff;
							border: 1px solid var(--td-brand-color);
							color: var(--td-brand-color);
						}
					}
				}
			}
		}
	}
}
</style>
